<template>
  <div class="app-container novel-workspace">
    <div class="workspace-header">
      <div class="project-info">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/novel/project' }">项目</el-breadcrumb-item>
          <el-breadcrumb-item>{{ currentProject?.title }}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="header-actions">
          <el-button type="success" @click="handleNextStep" v-if="canGoNext" size="small">
            <el-icon><Check /></el-icon> 完成
          </el-button>
        </div>
      </div>
    </div>
    
    <div class="workspace-content">
      <!-- 左侧面板 -->
      <div class="left-panel">
        <div class="panel-section chapter-list">
          <div class="section-header">
            <span class="section-title">章节列表</span>
            <div class="section-actions">
              <el-tooltip content="新增章节" placement="top">
                <el-button type="primary" link size="small" @click="handleAddChapter">
                  <el-icon><CirclePlus /></el-icon>
                </el-button>
              </el-tooltip>
              <el-tooltip content="展开全部" placement="top">
                <el-button link :icon="Expand" circle></el-button>
              </el-tooltip>
              <el-input
                v-model="searchKeyword"
                placeholder="搜索章节"
                clearable
                size="small"
                class="search-input"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
            </div>
          </div>
          <div class="section-body">
            <el-scrollbar height="calc(100% - 46px)">
              <el-tree
                ref="chapterTreeRef"
                :data="chapterTree"
                :props="{
                  label: 'title',
                  children: 'children'
                }"
                :filter-node-method="filterNode"
                node-key="id"
                highlight-current
                @node-click="handleChapterSelect"
              >
                <template #default="{ node, data }">
                  <div class="chapter-tree-node">
                    <span class="chapter-title">
                      <el-icon v-if="data.children && data.children.length"><Document /></el-icon>
                      <el-icon v-else><Memo /></el-icon>
                      {{ data.chapterNumber }} {{ data.title }}
                    </span>
                    <el-tag size="small" class="status-tag" :type="getStatusTag(data.status)" effect="light">
                      {{ data.status }}
                    </el-tag>
                  </div>
                </template>
              </el-tree>
            </el-scrollbar>
          </div>
        </div>
        
        <div class="panel-section ai-assistant">
          <NovelAiChat
            ref="aiChatRef"
            title="AI写作助手"
            placeholder="请输入您的写作需求，例如：帮我描写一个激烈的战斗场景，或者帮我构思一个感人的情节..."
            :loading="aiLoading"
            :enable-context="true"
            @send="handleAiChat"
            @abort="handleAbortAI"
          />
        </div>
      </div>
      
      <!-- 编辑器区域 -->
      <div class="editor-panel" :class="{ 'empty': !currentChapter }">
        <template v-if="currentChapter">
          <div class="editor-header">
            <div class="chapter-info">
              <h2 class="chapter-title">{{ currentChapter.title }}</h2>
              <div class="chapter-meta">
                <el-tag size="small" :type="getStatusTag(currentChapter.status)" effect="dark" round>
                  {{ currentChapter.status }}
                </el-tag>
                <span class="word-count">
                  <el-icon><Collection /></el-icon>
                  字数：{{ currentChapter.wordCount || 0 }}
                </span>
                <span class="last-updated">
                  <el-icon><Timer /></el-icon>
                  更新：{{ parseTime(currentChapter.updateTime || new Date()) }}
                </span>
              </div>
            </div>
            <div class="editor-actions">
              <el-tooltip content="保存" placement="top">
                <el-button type="primary" @click="handleSave" circle>
                  <el-icon><Document /></el-icon>
                </el-button>
              </el-tooltip>
              <el-tooltip content="AI辅助" placement="top">
                <el-button type="success" @click="handleAiAssist" circle :loading="aiLoading">
                  <el-icon><MagicStick /></el-icon>
                </el-button>
              </el-tooltip>
              <el-tooltip content="预览" placement="top">
                <el-button type="warning" @click="handlePreview" circle>
                  <el-icon><View /></el-icon>
                </el-button>
              </el-tooltip>
              <el-divider direction="vertical" />
              <el-tooltip content="上一章" placement="top">
                <el-button @click="handlePrevChapter" :disabled="!hasPrevChapter" circle>
                  <el-icon><ArrowLeft /></el-icon>
                </el-button>
              </el-tooltip>
              <el-tooltip content="下一章" placement="top">
                <el-button @click="handleNextChapter" :disabled="!hasNextChapter" circle>
                  <el-icon><ArrowRight /></el-icon>
                </el-button>
              </el-tooltip>
            </div>
          </div>
          
          <div class="editor-body">
            <div class="editor-toolbar">
              <div class="toolbar-status" v-if="aiLoading">
                <div class="status-icon"><el-icon class="is-loading"><Loading /></el-icon></div>
                <div class="status-text">AI 正在生成内容...</div>
              </div>
            </div>
            <NovelContentEditor
              v-model="currentChapter.content"
              :use-rich-editor="true"
              placeholder="开始写作你的故事..."
              @save="handleSave"
              @change="handleContentChange"
              class="content-editor"
            />
          </div>
        </template>
        <el-empty v-else description="请从左侧选择要编辑的章节" />
      </div>
    </div>

    <!-- 预览对话框 -->
    <el-dialog
      title="章节预览"
      v-model="previewDialog.visible"
      width="800px"
      append-to-body
      fullscreen
      custom-class="preview-dialog"
    >
      <div class="preview-container">
        <div class="preview-header">
          <h1>{{ previewDialog.chapter?.title }}</h1>
          <div class="preview-meta">
            <span>章节号：{{ previewDialog.chapter?.chapterNumber }}</span>
            <span>字数：{{ previewDialog.chapter?.wordCount }}</span>
          </div>
        </div>
        <div class="preview-content" v-html="previewDialog.content"></div>
      </div>
    </el-dialog>

    <!-- 新增章节对话框 -->
    <el-dialog
      v-model="chapterDialog.visible"
      :title="chapterDialog.title"
      width="500px"
      append-to-body
    >
      <el-form
        :model="chapterDialog.form"
        :rules="chapterDialog.rules"
        ref="chapterFormRef"
        label-width="100px"
      >
        <el-form-item label="章节标题" prop="title">
          <el-input v-model="chapterDialog.form.title" placeholder="请输入章节标题" />
        </el-form-item>
        <el-form-item label="章节编号" prop="chapterNumber">
          <el-input v-model="chapterDialog.form.chapterNumber" placeholder="例如: 第一章、Chapter 1" />
        </el-form-item>
        <el-form-item label="父章节" prop="parentId">
          <el-select v-model="chapterDialog.form.parentId" placeholder="选择父章节" clearable style="width: 100%">
            <el-option label="无（顶级章节）" :value="0" />
            <el-option
              v-for="item in chapterTree"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="chapterDialog.form.status" placeholder="选择状态" style="width: 100%">
            <el-option label="草稿" value="草稿" />
            <el-option label="写作中" value="写作中" />
            <el-option label="已完成" value="已完成" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="chapterDialog.visible = false">取消</el-button>
          <el-button type="primary" @click="submitChapterForm">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Search, ArrowLeft, ArrowRight, Document, Memo, Check,
  View, MagicStick, Collection, Timer, Loading, Expand, CirclePlus
} from '@element-plus/icons-vue'
import { getProject } from '@/api/novel/project'
import { getChapterContent, updateChapterContent, createChapterContent, listChapterContent } from '@/api/novel/chapterContent'
import { parseTime } from '@/utils/ruoyi'
import NovelAiChat from '@/components/NovelAiChat/index.vue'
import NovelContentEditor from '@/components/NovelContentEditor/index.vue'
import { useAIStream, PlatformType, AIModelType } from "@/components/Hook/useStreamFetch"

const route = useRoute()
const router = useRouter()

// 项目数据
const currentProject = ref(null)
const loading = ref(false)
const aiLoading = ref(false)
const chapterTree = ref([])
const currentChapter = ref(null)
const aiChatRef = ref(null)
const chapterTreeRef = ref(null)
const searchKeyword = ref('')

// 预览对话框
const previewDialog = ref({
  visible: false,
  chapter: null,
  content: ''
})

// 新增章节对话框
const chapterDialog = ref({
  visible: false,
  title: '新增章节',
  form: {
    title: '',
    chapterNumber: '',
    parentId: 0,
    status: '草稿'
  },
  rules: {
    title: [{ required: true, message: '请输入章节标题', trigger: 'blur' }],
    chapterNumber: [{ required: true, message: '请输入章节编号', trigger: 'blur' }]
  }
})

// AI对话相关
const difyApi = 'https://ark.cn-beijing.volces.com/api/v3/chat/completions'

const summaryRequestOptions = ref({
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer f9c1148b-26fc-4c92-8977-fca871de1af3'
  },
  body: ''
})

// 创建AI对话hook
const summaryHook = useAIStream({
  platform: PlatformType.VOLCANO,
  authToken: 'f9c1148b-26fc-4c92-8977-fca871de1af3',
  model: AIModelType.DEEPSEEK,
  enableContext: true,
  maxContextMessages: 5
})

// 解构hook返回值
const { data: summaryData, isLoading: isSummaryLoading, error: summaryError, chat: startAiChat, abortFetch: stopSummary } = summaryHook

// 计算属性
const canGoNext = computed(() => {
  return currentProject.value && chapterTree.value.length > 0
})

const hasPrevChapter = computed(() => {
  if (!currentChapter.value) return false
  const flatChapters = flattenChapters(chapterTree.value)
  const currentIndex = flatChapters.findIndex(chapter => chapter.id === currentChapter.value.id)
  return currentIndex > 0
})

const hasNextChapter = computed(() => {
  if (!currentChapter.value) return false
  const flatChapters = flattenChapters(chapterTree.value)
  const currentIndex = flatChapters.findIndex(chapter => chapter.id === currentChapter.value.id)
  return currentIndex < flatChapters.length - 1
})

// 获取状态标签样式
const getStatusTag = (status) => {
  const statusMap = {
    '草稿': 'info',
    '写作中': 'warning',
    '已完成': 'success'
  }
  return statusMap[status] || 'info'
}

// 获取项目信息
const getProjectInfo = async () => {
  const projectId = route.query.projectId
  if (!projectId) {
    ElMessage.warning('请先选择小说项目')
    router.push('/novel/project')
    return
  }

  try {
    const response = await getProject(projectId)
    currentProject.value = response.data
    getChapterList()
  } catch (error) {
    console.error('获取项目信息失败:', error)
  }
}

// 获取章节列表
const getChapterList = async () => {
  loading.value = true
  try {
    const response = await listChapterContent({ projectId: currentProject.value.id })
    chapterTree.value = buildChapterTree(response.rows)
  } catch (error) {
    console.error('获取章节列表失败:', error)
  } finally {
    loading.value = false
  }
}

// 构建章节树
const buildChapterTree = (chapters) => {
  const chapterMap = new Map()
  const tree = []

  // 先将所有章节放入Map
  chapters.forEach(chapter => {
    chapterMap.set(chapter.id, { ...chapter, children: [] })
  })

  // 构建树形结构
  chapters.forEach(chapter => {
    const node = chapterMap.get(chapter.id)
    if (chapter.parentId) {
      const parent = chapterMap.get(chapter.parentId)
      if (parent) {
        parent.children.push(node)
      }
    } else {
      tree.push(node)
    }
  })

  return tree
}

// 扁平化章节列表
const flattenChapters = (chapters) => {
  const result = []
  const flatten = (items) => {
    items.forEach(item => {
      result.push(item)
      if (item.children && item.children.length > 0) {
        flatten(item.children)
      }
    })
  }
  flatten(chapters)
  return result
}

// 处理章节选择
const handleChapterSelect = async (chapter) => {
  if (currentChapter.value?.id === chapter.id) return

  // 如果有未保存的内容，提示保存
  if (currentChapter.value?.content !== currentChapter.value?.originalContent) {
    try {
      await ElMessageBox.confirm('当前章节有未保存的内容，是否保存？', '提示', {
        confirmButtonText: '保存',
        cancelButtonText: '不保存',
        type: 'warning'
      })
      await handleSave()
    } catch (error) {
      if (error === 'cancel') {
        // 用户选择不保存，继续切换章节
      } else {
        return // 用户取消操作
      }
    }
  }

  try {
    // 获取章节内容
    const contentResponse = await getChapterContent(chapter.id)

    currentChapter.value = {
      ...chapter,
      content: contentResponse.data?.content || '',
      originalContent: contentResponse.data?.content || '',
      contentId: contentResponse.data?.id
    }
  } catch (error) {
    console.error('获取章节详情失败:', error)
    ElMessage.error('获取章节详情失败')
  }
}

// 处理保存
const handleSave = async () => {
  if (!currentChapter.value) return

  try {
    // 计算当前字数
    const wordCount = calculateWordCount(currentChapter.value.content)
    
    // 更新或创建章节内容
    if (currentChapter.value.contentId) {
      await updateChapterContent({
        id: currentChapter.value.contentId,
        outlineId: currentChapter.value.id,
        content: currentChapter.value.content,
        wordCount: wordCount,
        aiGenerated: currentChapter.value.aiGenerated || 0,
        generatedBy: currentChapter.value.generatedBy || '用户编辑'
      })
    } else {
      const response = await createChapterContent({
        outlineId: currentChapter.value.id,
        content: currentChapter.value.content,
        wordCount: wordCount,
        aiGenerated: 0,
        generatedBy: '用户创建'
      })
      currentChapter.value.contentId = response.data.id
    }

    currentChapter.value.originalContent = currentChapter.value.content
    currentChapter.value.wordCount = wordCount
    ElMessage.success('保存成功')
    getChapterList() // 刷新章节列表以更新状态
  } catch (error) {
    console.error('保存失败:', error)
    throw error
  }
}

// 监听AI响应
watch(summaryData, (newVal) => {
  if (newVal) {
    // 更新AI对话框内容
    aiChatRef.value?.addAiResponse({ isStreaming: true, content: newVal })
    
    // 如果是辅助写作模式，实时更新编辑器内容
    if (currentChapter.value && aiWritingMode.value === 'continue') {
      currentChapter.value.content = currentChapter.value.originalContent + '\n\n' + newVal;
    } else if (currentChapter.value && aiWritingMode.value === 'chat') {
      // 普通对话模式下不自动插入到编辑器
    }
  }
})

// 监听加载状态
watch(isSummaryLoading, (newVal) => {
  aiLoading.value = newVal;
  if (!newVal) {
    // AI生成结束
    aiChatRef.value?.addAiResponse({ isStreaming: true, end: true })
    
    // 重置AI写作模式
    aiWritingMode.value = '';
  }
})

// AI写作模式标记：continue-续写模式，chat-普通对话模式
const aiWritingMode = ref('');

// 处理终止AI对话
const handleAbortAI = () => {
  stopSummary()
  aiLoading.value = false
  aiWritingMode.value = '';
  aiChatRef.value?.addAiResponse({ isStreaming: true, end: true })
}

// 处理AI辅助写作
const handleAiAssist = async () => {
  if (!currentChapter.value) {
    ElMessage.warning('请先选择章节')
    return
  }
  
  try {
    // 保存原始内容，用于实时续写
    currentChapter.value.originalContent = currentChapter.value.content;
    
    // 设置为续写模式
    aiWritingMode.value = 'continue';
    
    // 设置AI生成标志
    currentChapter.value.aiGenerated = 1;
    currentChapter.value.generatedBy = 'DeepSeek'; // 或动态设置当前模型名称
    
    const prompt = `你是一个专业的小说写作助手。请根据以下内容继续写作：
    1. 当前章节标题：${currentChapter.value.title}
    2. 当前章节内容：${currentChapter.value.content || '暂无内容'}
    
    请继续写作，注意：
    - 保持与已有内容的连贯性
    - 使用生动的描写和对话
    - 注意情节的推进和人物的发展
    - 生成的内容要自然流畅，避免生硬的过渡`

    // 系统提示词
    const systemPrompt = '你是一个专业的小说写作助手，擅长生成生动有趣的小说内容。'

    // 开始流式显示
    aiChatRef.value?.addAiResponse({ isStreaming: true, start: true })
    
    // 使用优化后的AI聊天函数
    await startAiChat(prompt, systemPrompt)
    
  } catch (error) {
    console.error('AI生成失败:', error)
    ElMessage.error('AI生成失败，请重试')
    // 结束流式显示
    aiChatRef.value?.addAiResponse({ isStreaming: true, end: true })
    aiWritingMode.value = '';
  }
}

// 处理AI对话
const handleAiChat = async (data) => {
  try {
    const { message } = data
    
    if (!currentChapter.value) {
      ElMessage.warning('请先选择章节')
      return
    }
    
    // 设置为普通对话模式
    aiWritingMode.value = 'chat';
    
    // 开始流式显示
    aiChatRef.value?.addAiResponse({ isStreaming: true, start: true })
    
    const systemPrompt = `你是一个专业的小说写作助手。请根据用户的要求，提供高质量的写作建议和内容。
当前章节信息：
- 标题：${currentChapter.value.title}
- 当前内容长度：${currentChapter.value.content?.length || 0}字符`
    
    // 使用优化后的AI聊天函数
    await startAiChat(message, systemPrompt)
    
  } catch (error) {
    console.error('AI生成失败:', error)
    ElMessage.error('AI生成失败，请重试')
    // 结束流式显示
    aiChatRef.value?.addAiResponse({ isStreaming: true, end: true })
    aiWritingMode.value = '';
  }
}

// 处理预览
const handlePreview = () => {
  if (!currentChapter.value) return

  previewDialog.value = {
    visible: true,
    chapter: currentChapter.value,
    content: currentChapter.value.content
  }
}

// 处理上一章
const handlePrevChapter = () => {
  if (!hasPrevChapter.value) return

  const flatChapters = flattenChapters(chapterTree.value)
  const currentIndex = flatChapters.findIndex(chapter => chapter.id === currentChapter.value.id)
  handleChapterSelect(flatChapters[currentIndex - 1])
}

// 处理下一章
const handleNextChapter = () => {
  if (!hasNextChapter.value) return

  const flatChapters = flattenChapters(chapterTree.value)
  const currentIndex = flatChapters.findIndex(chapter => chapter.id === currentChapter.value.id)
  handleChapterSelect(flatChapters[currentIndex + 1])
}

// 处理内容变化
const handleContentChange = (content) => {
  if (!currentChapter.value) return
  currentChapter.value.wordCount = calculateWordCount(content)
}

// 计算字数
const calculateWordCount = (content) => {
  if (!content) return 0
  // 移除HTML标签
  const text = content.replace(/<[^>]+>/g, '')
  // 计算中文字数和英文字数
  const chineseCount = (text.match(/[\u4e00-\u9fa5]/g) || []).length
  const englishCount = (text.match(/[a-zA-Z]+/g) || []).join('').length
  return chineseCount + Math.ceil(englishCount / 2)
}

// 处理下一步
const handleNextStep = () => {
  router.push('/novel/project')
}

// 章节树搜索
const filterNode = (value, data) => {
  if (!value) return true
  return data.title.toLowerCase().includes(value.toLowerCase()) ||
         data.chapterNumber.toLowerCase().includes(value.toLowerCase())
}

// 监听搜索关键词
watch(searchKeyword, (val) => {
  chapterTreeRef.value?.filter(val)
})

// 处理新增章节
const handleAddChapter = () => {
  chapterDialog.value.form = {
    title: '',
    chapterNumber: '',
    parentId: 0,
    status: '草稿'
  }
  chapterDialog.value.visible = true
}

// 提交章节表单
const submitChapterForm = async () => {
  try {
    const formData = {
      ...chapterDialog.value.form,
      projectId: currentProject.value.id,
      // 添加新增章节时需要的字段，与NovelChapterContentBo保持一致
      outlineId: 0, // 默认先设置为0，实际应根据章节大纲关联
      aiGenerated: 0, // 手动创建，非AI生成
      generatedBy: '用户手动创建',
      content: '' // 初始内容为空
    }
    
    loading.value = true
    await createChapterContent(formData)
    ElMessage.success('章节创建成功')
    chapterDialog.value.visible = false
    getChapterList()
  } catch (error) {
    console.error('创建章节失败:', error)
    ElMessage.error('创建章节失败')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  getProjectInfo()
})
</script>

<style lang="scss" scoped>
.novel-workspace {
  height: calc(100vh - 84px);
  display: flex;
  flex-direction: column;
  background-color: #f9fafc;
  overflow: hidden;

  .workspace-header {
    padding: 12px 24px;
    border-bottom: 1px solid #e4e7ed;
    background: white;
    
    .project-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .header-actions {
        display: flex;
        gap: 12px;
      }
    }
  }
  
  .workspace-content {
    flex: 1;
    display: flex;
    overflow: hidden;
    
    .left-panel {
      width: 450px;
      display: flex;
      flex-direction: column;
      border-right: 1px solid #e4e7ed;
      
      .panel-section {
        padding: 0;
        overflow: hidden;
        
        &.chapter-list {
          height: 300px;
          border-bottom: 1px solid #e4e7ed;
          
          .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 16px;
            border-bottom: 1px solid #ebeef5;
            background: white;
            
            .section-title {
              font-size: 14px;
              font-weight: 500;
              color: #303133;
            }
            
            .section-actions {
              display: flex;
              align-items: center;
              gap: 8px;
              
              .search-input {
                width: 160px;
              }
            }
          }
          
          .section-body {
            height: calc(100% - 46px);
            background: white;
            
            :deep(.el-tree-node__content) {
              height: auto;
              padding: 6px 0;
            }
            
            .chapter-tree-node {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              gap: 8px;
              padding: 2px 0;
              
              .chapter-title {
                display: flex;
                align-items: center;
                gap: 6px;
                font-size: 13px;
                white-space: normal;
                word-break: break-word;
              }
              
              .status-tag {
                flex-shrink: 0;
                font-size: 11px;
              }
            }
          }
        }
        
        &.ai-assistant {
          flex: 1;
        }
      }
    }
    
    .editor-panel {
      flex: 1;
      display: flex;
      flex-direction: column;
      
      &.empty {
        align-items: center;
        justify-content: center;
      }
      
      .editor-header {
        padding: 16px 24px;
        background: white;
        border-bottom: 1px solid #e4e7ed;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .chapter-info {
          .chapter-title {
            margin: 0 0 8px 0;
            font-size: 20px;
            color: #303133;
          }
          
          .chapter-meta {
            display: flex;
            align-items: center;
            gap: 16px;
            color: #606266;
            font-size: 14px;
            
            .word-count, .last-updated {
              display: flex;
              align-items: center;
              gap: 4px;
            }
          }
        }
        
        .editor-actions {
          display: flex;
          align-items: center;
          gap: 8px;
        }
      }
      
      .editor-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        background: white;
        padding: 0 24px;
        
        .editor-toolbar {
          padding: 8px 0;
          min-height: 40px;
          border-bottom: 1px solid #f0f2f5;
          
          .toolbar-status {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #1890ff;
            font-size: 14px;
            
            .status-icon {
              animation: spin 2s linear infinite;
            }
          }
        }
        
        .content-editor {
          flex: 1;
          overflow: auto;
          padding: 16px 0;
        }
      }
    }
  }
}

.preview-dialog {
  :deep(.el-dialog__body) {
    padding: 0;
  }
  
  .preview-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
    line-height: 1.8;
    
    .preview-header {
      text-align: center;
      margin-bottom: 40px;
      
      h1 {
        margin-bottom: 16px;
      }
      
      .preview-meta {
        color: #909399;
        display: flex;
        justify-content: center;
        gap: 20px;
      }
    }
    
    .preview-content {
      font-size: 16px;
    }
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>
